<template>
	<div class="userguide">
		<PageHeader :lang="lang"></PageHeader>
		<div class="pageBody" id="pageBody" v-html ="coinIntroduce">

		</div>
	<PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
</div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
import commonFilter from '@/filters/common.js'
import Decimal from '@/libs/decimal.min.js'
import Utils from '@/utils/Utils.js'
export default {
  mixins: [commonMixins],
  data () {
    return {
      coinIntroduce: '',
      userGuideUrl: '',
    }
  },
  components: {

  },
  watch: {
    langKey () {
      this.langKeyIs()
    }
  },
  methods: {
    getSetting (data) {
      this.$host2.get('Info/GetC2CSetting')
      .then((res) => {
        if (res.StatusCode === '200') {
          res.Data = res.Data || {}
          let number = new Decimal(res.Data.WaitConfirmReceipt || 0)
          number = number.div(60).toFixed()
          number = commonFilter.trimDecimal(number, 2)
          this.coinIntroduce = data.replace(/\{minute\}/g, res.Data.WaitConfirmPay || 0).replace(/\{hour\}/g, number)
        }
      })
    },
    initCountryList () {
      this.$http.get('/static/articles/userguide_' + this.userGuideUrl + '.txt', {}, {
        isCustomUrl: true
      }).then((res) => {
        res = Utils.replaceText(res, 'siteAddress')
        res = Utils.replaceText(res, 'siteName')
        this.getSetting(res)
      })
    },
    langKeyIs () {
      if (this.langKey === 'zh-CN' || this.langKey === 'zh-Hant' || this.langKey === 'vi') {
        this.userGuideUrl = this.langKey
      } else {
        this.userGuideUrl = 'en'
      }
      this.initCountryList()
    }
  },
  mounted () {
    this.langKeyIs()
  }
}
</script>
<style lang="less">
.userguide {
  .pt40{
    margin-top: 40px;
    clear:both;
  }

  .userGuideMain h1{
    font-size: 18px;
    padding-bottom: 30px;
    line-height: 100px;
    text-align: center;
    color: #fff;
  }
  .userguideExplain{
    margin: 100px auto;
    border: 1px solid #2A3440;
    border-radius: 10px;
    padding: 30px 20px;
    clear: both;
    width:1133px;
    color: #fff;
  }
  .userguideExplain h3{
    text-align: center;
    font-size: 24px;
    margin-bottom: 25px;
  }
  .userguideExplain p{
    line-height: 32px;
    font-size: 14px;
  }
  .userGuideMain .userguideBox ul li{
    text-align: center;
    float: left;
    display: table;
    color: #fff;
    border-radius: 10px;
    background: #2A3440;
    width: 145px;
    height: 145px;
  }
  .userGuideMain .userguideBox ul {
    overflow: hidden;
  }
  .userGuideMain .userguideBox ul li p{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    line-height: 20px;
    padding:0 5px;
  }
  .userGuideMain .userguideBox ul span{
    float: left;
    background: url(./images/userguide1.png) no-repeat center center;
    background-size: 18px auto;
    display: inline-block;
    width: 30px;
    height: 160px;
  }
}

@media screen and (max-width:1200px){
  .userguide {
    .pageBody {
      width: 700px;
      min-width: auto;
      margin: 0 auto;

      /*== 样式强改布局 ==*/
      .userguideBox {
        ul {
          position: relative;
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;

          li:nth-child(n+8) {
            margin-top: 20px;
          }
          span:nth-child(n+8) {
            margin-top: 20px;
            transform: rotate(182deg)
          }
          span:nth-child(8) {
            position: absolute;
            right: 55px;
            top: 64px;
            transform: rotate(90deg)
          }
          li:nth-child(9) {
            margin-left: 174px;
          }
        }
      }

      .userguideExplain {
        width: 100%;
        box-sizing: border-box;
      }
    }
  }
}
</style>
